<template>
  <div class="chart_main">
    <div v-show="state.option.show" ref="dashboardChart"></div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref, defineProps, reactive, computed, watch} from "vue";
import * as echarts from "echarts";
import {copyDefinedProperties} from "../../../../utils/copy.ts"
import {getColorFromLocal} from "../../../style/css.ts";
let cmap=getColorFromLocal()
const props = defineProps(['option']);
const dashboardChart=ref(null)
const state = reactive({
  option:{
    height:200,
    width:300,
    left:0,
    top:0,
    show:true,
  },
  window:{
    height:1700,
    width:800,
  }
});
watch(()=>props.option,(newValue,oldValue)=>{
  // console.log('workOrder变化了',newValue,oldValue)
  setting()
},{immediate:true,deep:true})
onMounted(()=>{
  setting()
  initBarChart()
})
function setting(){
  if(props.option!==undefined){
    copyDefinedProperties(props.option,state.option)
    state.window={
      width: document.body.clientWidth,
      height: document.body.clientHeight
    }
  }
}
let edashboardchart
let canvas
const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
window.addEventListener('resize',()=>{
  // console.log("width,height",document.body.clientWidth,document.body.clientHeight)
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
  edashboardchart.resize(getChartSize())
})
function getChartSize(){
  return{
    width:(state.option.width/100)*state.window.width,
    height:(state.option.height/100)*state.window.height
  }
}
function initBarChart(){
  edashboardchart=echarts.init(dashboardChart.value,null,getChartSize())
  //修改样式(防止被挡)
  canvas=edashboardchart.getZr().dom
  canvas.style.zIndex=9999
  // canvas.style.position="absolute"
  // canvas.style.top=`${state.option.top}px`
  // canvas.style.left=`${state.option.left}px`
  let data=[{value:0}]
  SetOption(data)
}
function SetOption(data){
  if(edashboardchart!==undefined){
    edashboardchart.setOption({
      tooltip:{
      },
      series: [
        {
          type: 'gauge',
          startAngle: 210,
          endAngle: -30,
          min: 0,
          max: 240,
          splitNumber: 12,
          itemStyle: {
            color: cmap.color[0],
            borderColor: cmap.borderColor,
            shadowColor: cmap.color,
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2
          },
          progress: {
            show: true,
            roundCap: true,
            width: 7
          },
          pointer: {
            icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
            length: '65%',
            width: 6,
            offsetCenter: [0, '5%']
          },
          axisLine: {
            roundCap: true,
            lineStyle: {
              width: 7
            }
          },
          axisTick: {
            splitNumber: 2,
            lineStyle: {
              width: 1,
              color: '#999'
            }
          },
          splitLine: {
            length: 6,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          axisLabel: {
            distance: 10,
            color: '#999',
            fontSize: 6
          },
          title: {
            show: false
          },
          detail: {
            backgroundColor: '#fff',
            borderColor: '#999',
            borderWidth: 2,
            width: '40%',
            lineHeight: 20,
            height: 17,
            borderRadius: 8,
            offsetCenter: [0, '35%'],
            valueAnimation: true,
            formatter: function (value) {
              return '{value|' + value.toFixed(0) + '}{unit|}';
            },
            rich: {
              value: {
                fontSize: 11,
                fontWeight: 'bolder',
                color: '#777'
              },
              unit: {
                fontSize: 11,
                color: '#999',
                padding: [0, 0, 0, 0]
              }
            }
          },
          data: data
        }
      ]
    });
  }
}
defineExpose({SetOption})
</script>

<style scoped>
.chart_main{
  position: absolute;
  left:v-bind(left);
  top:v-bind(top);
}
</style>
